﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Cells in Different Colors</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.checkbox.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.checkbox.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "$timeout", "IntegralUITreeGridService", function($scope, $timeout, $gridService){
				$scope.gridName = "gridSample";
				$scope.gridLines = 'both';

				var redCell = {
					normal: 'cell-red',
					hovered: 'cell-red'
				}

				var greenCell = {
					normal: 'cell-green',
					hovered: 'cell-green'
				}

				var blueCell = {
					normal: 'cell-blue',
					hovered: 'cell-blue'
				}

				$scope.ctrlStyle = {
					row: {
						general: {
							hovered: 'row-hovered'
						},
						cell: {
							hovered: 'cell-hover'
						}
					}
				}

				$scope.columns = [
					{ name: 'Column1', headerText: 'Header1', footerText: 'Footer1', headerAlignment: 'center', footerAlignment: 'right', width: 200 },
					{ name: 'Column2', headerText: 'Header2', footerText: 'Footer2', headerAlignment: 'center', contentAlignment: 'center', width: 250 },
					{ name: 'Column3', headerText: 'Header3', footerText: 'Footer3', contentAlignment: 'right', footerAlignment: 'right', width: 120 }
				];

				$scope.rows = [
					{ 
						id: 1,
						text: "Item1",
						cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],
						rows: [
							{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113", style: greenCell }] },
							{ 
								id: 12,
								pid: 1,
								text: "Item12",
								cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],
								rows: [
									{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211", style: blueCell }, { text: "Item1212" }, { text: "Item1213" }] },
									{ 
										id: 122,
										pid: 12,
										text: "Item122", 
										cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],
										expanded: false,
										rows: [
											{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },
											{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }
										]
									},
									{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] }
								]
							},
							{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132", style: redCell }, { text: "Item133" }] },
							{
								id: 14,
								pid: 1,
								text: "Item14",
								cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],
								expanded: false,
								rows: [
									{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },
									{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }
								]
							}
						]
					},
					{
						id: 2,
						text: "Item2",
						cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],
						rows: [
							{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },
							{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },
							{
								id: 23,
								pid: 2,
								text: "Item23", 
								cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],
								expanded: false,
								rows: [
									{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },
									{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }
								]
							}
						]
					},
					{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] }
				];

				$scope.onCellClick = function(e){
					if (e.cell.mark == undefined)
						e.cell.mark = 0;
					e.cell.mark++;
					if (e.cell.mark > 3)
						e.cell.mark = 0;

					switch (e.cell.mark){
						case 1:
							e.cell.style = redCell;
							break;
						case 2:
							e.cell.style = greenCell;
							break;
						case 3:
							e.cell.style = blueCell;
							break;
						default:
							e.cell.style = null;
							break;
					}

					$gridService.refresh($scope.gridName, e.row);
				}

			}]);
    </script>
    <style type="text/css">
		.feature-content
		{
			width: 750px;
		}
		.directive
		{
			border: thin solid #cecece;
        	width: 600px;
        	height: 300px;
		}
		.row-hovered
		{
			background: white;
		}
		.cell-red
		{
			background: url("red-cell.png") right no-repeat;
			background: #be0000;
			color: white;
		}
		.cell-green
		{
			background: url("red-cell.png") right no-repeat;
			background: #00be00;
			color: white;
		}
		.cell-blue
		{
			background: url("red-cell.png") right no-repeat;
			background: #0000be;
			color: white;
		}
		.cell-hover
		{
			background: white;
			color: red;
		}
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Cells in Different Colors</h2>
	        <div class="feature-content">
	            <div style="display:inline-block">
	                <iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" control-style="ctrlStyle" allow-focus="false" selection-mode="none" cell-click="onCellClick(e)" grid-lines="gridLines"></iui-treegrid>
                    <br style="clear:both;"/>
                </div>
                <div class="feature-help" style="margin:0">
                    <p><span class="initial-space"></span>This sample shows how to change the appearance of individual cell in TreeGrid.</p>
                    <p><span class="initial-space"></span>Initially, all cells when hovered will change their text color to red. This is set in the general style of the TreeGrid. There is a <span style="color:#c60d0d">controlStyle</span> attribute, which accepts an object that represents the overall style of the directive. You can override the default appearance of all parts of the TreeGrid, by applying changes for all objects (column, row or cell) within this general style.</p>
                    <p><span class="initial-space"></span>Additionally, three cells have a different look: red, green and blue. This is set in our sample data source, by using the <span style="color:#c60d0d">style</span> field of cell object. This field can accept a custom CSS class, in which you can set your own colors.</p>
                    <p><span class="initial-space"></span>When a cell is clicked, you will notice how its background and text color changes. This is done by handling the cellClick event where we apply a different style to clicked cell.</p>
                    <p><span class="initial-space"></span>For more information, check out the source code of this sample.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
